<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./libs/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <script data-main="./js/index" src="./libs/require.js"></script>
</head>
    <body>
    <div class="swiper-container">
        <div class="menu">
            <ul class="list">
                <li><a href="#">手机 电话卡</a>
                    <i class="iconfont icon-previewright"></i>
                </li>
                <li><a href="#">电视 盒子</a>
                    <i class="iconfont icon-previewright"></i>
                </li>
                <li><a href="#">笔记本 显示器</a>
                    <i class="iconfont icon-previewright"></i>
                </li>
                <li><a href="#">家电插线板</a>
                    <i class="iconfont icon-previewright"></i>
                </li>
                <li><a href="#">出行 穿戴</a>
                    <i class="iconfont icon-previewright"></i>
                </li>
                <li><a href="#">智能 路由器</a>
                    <i class="iconfont icon-previewright"></i>
                </li>
                <li><a href="#">电源 配件</a>
                    <i class="iconfont icon-previewright"></i>
                </li>
                <li><a href="#">健康 儿童</a>
                    <i class="iconfont icon-previewright"></i>
                </li>
                <li><a href="#">耳机 音箱</a>
                    <i class="iconfont icon-previewright"></i>
                </li>
                <li><a href="#">生活 箱包</a>
                    <i class="iconfont icon-previewright"></i>
                </li>
            </ul>
        </div>
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="./images/1.webp" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./images/2.webp" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./images/3.jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
    <div class="home-hero">
        <div class="home">
            <div class="list1">
                <div class="img">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
                </div>
                <p>小米秒杀</p>
            </div>
            <div class="list2">
                <div class="img">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="">
                </div>
                <p>企业团购</p>
            </div>
            <div class="list3">
                <div class="img">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48" alt="">
                </div>
                <p>F码通道</p>
            </div>
            <div class="list4">
                <div class="img">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48" alt="">
                </div>
                <p>米粉卡</p>
            </div>
            <div class="list5">
                <div class="img">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48" alt="">
                </div>
                <p>以旧换新</p>
            </div>
            <div class="list6">
                <div class="img">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48" alt="">
                </div>
                <p>话费充值</p>
            </div>
        </div>
        <div class="list-img">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d4298059889417157e8492750328492.jpg?w=632&h=340" alt="">
        </div>
        <div class="list-img">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b30177d629bfbe2fb42251c1b8538f7b.jpg?w=632&h=340" alt="">
        </div>
        <div class="list-img">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9f18ac756fa2cedb16ea429b9c0001af.png?w=632&h=340" alt="">
        </div>
    </div>
    <main id="list"></main>
    <!-- 定义渲染模板 -->
    <script type="text/html" id="hot-template">
        {{each products prod index}}
        <div class="shopping-list">
            <div class="banner">
                <img src="{{prod.bannerImage}}" alt="">
            </div>
            <div class="title">
                <h2>{{prod.title.h3}}</h2>
                <div class="more">
                    <a href="#">{{prod.title.more}}</a>
                    <i class="iconfont icon-previewright"></i>
                </div>
            </div>
            <div class="shopping-show">
                <div class="brick-item">
                    <img src="{{prod.imageBig}}" alt="">
                </div>
                <ul class="list">
                    {{each prod.list li}}
                        <li class="turn-to-detail" data-id={{li.id}}>
                            <div class="img">
                                <img src="{{li.image}}" alt="" class="image">
                            </div>
                            <h3 class="title">{{li.title}}</h3>
                            <p class="des">{{li.des}}</p>
                            <p class="price">
                                <span class="cur">{{li.curPrice | mark}}</span>
                                <span class="org">{{li.orgPrice | mark}}</span>
                            </p>
                        </li>
                    {{/each}}
                </ul>
            </div>
        </div>
        {{/each}}
    </script>
    </body>
</html>